$(function () {
    //0.定义类管理每一个界面
    class Views {
        constructor(params) {
            params = params || { offsetX: 0, list: 30 }
            this.offset = params.offset
            this.limit = params.limit
        }
    }
    class Song extends Views {
        constructor(myScroll, params) {
            super(params)
            this.myScroll = myScroll
            this.name = "song"
            this.type = 1
            //多选按钮的点击事件
            $(".multiple-select").click(function () {
                $(".main-in>.song>.top").addClass("active")
                $(".main-in>.song>.list").addClass("active")
            })
            //完成取消按钮的点击事件
            $(".complete-select").click(function () {
                $(".main-in>.song>.top").removeClass("active")
                $(".main-in>.song>.list").removeClass("active")
            })
            //全选按钮点击事件
            $(".check-all").click(function () {
                // toggleClass()替换添加
                $(this).toggleClass("active")
                $(".main-in>.song>.list>li").toggleClass("active")
            })
            //处理单曲界面的头部导航
            this.myScroll.on("scroll", function () {
                if (this.y < 0) {
                    $(".main-in>.song>.top").css({ top: -this.y })

                } else {
                    $(".main-in>.song>.top").css({ top: 0 })

                }
            })
        }
        initData() {
            let that = this
            //加载曲目默认数据
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    let html = template('songItems', data.result)
                    $(".main-in>.song>.list").html(html)
                    that.myScroll.refresh();
                    // console.log(data);

                    $(".song>.list>li").click(function() {
                        let songId = this.dataset.musicId
                        let songName = $(this).find(".song-name").text()
                        let songSinger = $(this).find(".song-singer").text()
                        console.log(songId,songName,songSinger);
                        setSong(songId,songName,songSinger)
                        window.location.href ="./../player/index.html"
                    })
                })
                .catch(function (err) {
                    console.log(err);
                })
        }

    }
    class PlayList extends Views {
        constructor(params) {
            super(params)
            this.name = "playList"
            this.type = 1000
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    data.result.playlists.forEach(function (obj) {
                        //播放数量
                        obj.playCount = formartNum(obj.playCount)
                    })
                    let html = template('playListItems', data.result)
                    $(".main-in>.playList>.list").html(html)
                    $(".main-in>.playList>.list .playList-title").forEach(function (ele) {
                        $clamp(ele, { clamp: 1 })
                    })
                    myScroll.refresh();
                    // console.log(data);
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class Video extends Views {
        constructor(params) {
            super(params)
            this.name = "video"
            this.type = 1014
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    data.result.videos.forEach(function (obj) {
                        obj.playCount = formartNum(obj.playTime)
                        let res = formartTime(obj.durationms)
                        obj.time = res.minute + ":" + res.second
                    })
                    let html = template('videoItems', data.result)
                    $(".main-in>.video>.list").html(html)
                    $(".main-in>.video>.list .video-title").forEach(function (ele) {
                        $clamp(ele, { clamp: 2 })
                    })
                    // myScroll.refresh();
                    // console.log(data);
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class Artist extends Views {
        constructor(params) {
            super(params)
            this.name = "artist"
            this.type = 100
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    let html = template('artistItems', data.result)
                    $(".main-in>.artist>.list").html(html)
                    myScroll.refresh();
                    // console.log(data);
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class TextSong extends Views {
        constructor(params) {
            super(params)
            this.name = "album"
            this.type = 10
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    console.log(data);
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class Album extends Views {
        constructor(params) {
            super(params)
            this.name = "album"
            this.type = 10
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    data.result.albums.forEach(function (obj) {
                        //专辑推出时间
                        obj.time = dateFormart("yyyy-MM-dd", new Date(obj.publishTime))
                    })
                    let html = template('albumItems', data.result)
                    $(".main-in>.album>.list").html(html)
                    $(".main-in>.album>.list .album-title").forEach(function (ele) {
                        $clamp(ele, { clamp: 1 })
                    })
                    myScroll.refresh();
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class User extends Views {
        constructor(params) {
            super(params)
            this.name = "user"
            this.type = 1002
        }
        initData() {
            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    let html = template('userItems', data.result)
                    $(".main-in>.user>.list").html(html)
                    myScroll.refresh();
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    class Compisite extends Views {
        constructor(params) {
            super(params)
            this.name = "compisite"
            this.type = 1018
        }
        initData() {

            SearchApis.getSearch(keyword, this.offset, this.limit, this.type)
                .then(function (data) {
                    // 1.创建所有的分区
                    let html = template('compositeItems', data.result)
                    $(".main-in>.composite").html(html)
                    console.log(data);
                    // 2.填充分区的数据
                    data.result.order.forEach(function (name) {
                        console.log(name);
                        let currentData = data.result[name]
                        if (name === "song") {
                            currentData.songs.forEach(function (obj) {
                                obj.artists = obj.ar
                                obj.album = obj.al
                            })
                        } else if (name === "playList") {
                            currentData.playlists = currentData.playLists
                            currentData.playlists.forEach(function (obj) {
                                //播放数量
                                obj.playCount = formartNum(obj.playCount)
                            })
                        } else if (name === "new_mlog") {
                            return true
                        } else if (name === "circle") {
                            return true
                        }
                        else if (name === "sim_query") {
                            currentData.more = false
                        } else if (name === "user") {
                            currentData.userprofiles = currentData.users
                        }
                        let currentHtml = template(name + 'Items', currentData)
                        $(".composite>." + name + ">.list").html(currentHtml)
                        $(".composite>." + name + ">.list ." + name + "-title").forEach(function (ele) {
                            $clamp(ele, { clamp: 1 })
                        })
                        $(".composite>." + name + ">.list ." + name + "-init").forEach(function (ele) {
                            $clamp(ele, { clamp: 1 })
                        })
                    })
                    myScroll.refresh();
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
    //1.初始化头部
    let keyword = initHeader()
    function initHeader() {
        //获取传递过来的参数
        let keyword = window.location.href.substring(window.location.href.lastIndexOf("keyword=") + "keyword=".length)
        //字符串解码
        // trim()去除两端的空格 
        keyword = decodeURIComponent(keyword).trim()
        //给头部输入框设置数据
        $(".header input").attr("value", keyword)

        //监听返回按钮的点击
        $(".go-back").click(function () {
            window.history.back()
        })
        console.log(keyword);
        return keyword
    }
    //2.初始化上拉加载
    let isRefresh = true
    let isPullUp = false
    let index = 0
    let myScroll = initScroll()
    //初始化上拉加载
    function initScroll() {
        let myScroll = new IScroll(".main", {
            mouseWheel: false,
            scrolbars: false,
            probeType: 3,
        })
        myScroll.on("scroll", function () {
            //处理上拉加载
            if (this.y <= myScroll.maxScrollY) {
                isPullUp = true
            }
        })
        myScroll.on("scrollEnd", function () {
            if (isPullUp && !isRefresh) {
                isRefresh = true
                //去网络刷新数据
                refreshUp()
            }
        })
        function refreshUp() {
            let curViewObj = views[index];
            curViewObj.offset += curViewObj.limit
            SearchApis.getSearch(keyword, curViewObj.offset, curViewObj.limit, curViewObj.type)
                .then(function (data) {
                    // if (data.result.songs) {
                    let html = template(curViewObj.name + 'Items', data.result)
                    $(".main-in>." + curViewObj.name + ">.list").append(html)
                    // }
                    isPullUp = false
                    isRefresh = false
                    myScroll.refresh();
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
        return myScroll
    }
    let views = [new Compisite(), new Song(myScroll), new PlayList(), new Video(), new Artist(), new TextSong(), new TextSong(), new Album(), new TextSong(), new TextSong(), new User()];

    //3.导航条
    initNav()
    function initNav() {
        //1.初始化导航宽度
        let oUlWidth = 0
        $(".nav>ul>li").forEach(function (oLi) {
            oUlWidth += oLi.offsetWidth
        })
        let navPaddingRight = parseFloat(getComputedStyle($(".nav")[0]).paddingRight)
        $(".nav>ul").css({ width: oUlWidth + navPaddingRight })
        //创建滚动
        let navScroll = new IScroll('.nav', {
            mouseWheel: false,
            scrolbars: false,
            scrollX: true
        })
        //3.监听导航条点击
        $(".nav>ul>li").click(function () {
            let padding = parseFloat(getComputedStyle($(this)[0]).paddingLeft) + parseFloat(getComputedStyle($(this)[0]).paddingRight)
            let spanWidth = this.offsetWidth - padding
            // 每次被卷去的长度
            let offsetX = $(".nav").width() / 2 - this.offsetLeft - this.offsetWidth / 2 - navPaddingRight
            //控制切换页面        
            if (offsetX > 0) {
                offsetX = 0
            } else if (offsetX < navScroll.maxScrollX) {
                offsetX = navScroll.maxScrollX
            }
            //让导航条滚动
            navScroll.scrollTo(offsetX, 0, 300)
            //
            $(".main-in>div").removeClass("active").eq($(this).index()).addClass("active")
            //控制span移动下标
            let spanScroll = this.offsetLeft == 0 ? this.offsetLeft : this.offsetLeft + (spanWidth / 2)
            $(".nav>ul>.current").animate({ left: spanScroll, width: spanWidth }, 300)
            myScroll.refresh();
            //控制上拉加载显示和隐藏
            index = $(this).index()
            if (index === 0) {
                $(".pull-up").hide();
                isRefresh = true
            } else {
                $(".pull-up").show();
                isRefresh = false
            }
            let curViewObj = views[index];
            if (curViewObj.initData) {
                curViewObj.initData()
                delete curViewObj.initData
            }

        })
    }
    //4.初始化底部
    $(".footer").load("./../common/footer.html", function () {
        //当加载的内容被添加之后
        let sc = document.createElement("script")
        sc.src = "./../common/js/footer.js";
        document.body.appendChild(sc)
    })
    //5.初始化默认界面
    let cp = new Compisite()
    cp.initData()


    
})